<template>
    <div ref="chartEl" :style="{ height: height, width: width }" />
</template>

<script>
// 加载echarts基本模块，注意引入文件的路径
import * as echarts from 'echarts/lib/echarts'
// 再引入需要使用的图表类型，标题，提示信息等
import { LineChart, BarChart, PieChart, CandlestickChart } from 'echarts/charts'
import { LegendComponent, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, ToolboxComponent } from 'echarts/components'
// 注册必须的组件
echarts.use([LineChart, BarChart, PieChart, CandlestickChart, LegendComponent, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, ToolboxComponent])
export default {
    name: 'ChartBlock',
    props: {
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '350px'
        }
    },
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.chart = echarts.init(this.$refs.chartEl)
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        setOption(option) {
            this.chart && this.chart.setOption(option)
        },
        getChartInstance() {
            return this.chart
        }
    }
}
</script>
